<template>
	<view>
		<uni-nav-bar style="width: 100%;" left-icon="back" right-text="兑换记录" title="闪兑" @clickLeft="clickLeft" @clickRight="clickRight"></uni-nav-bar>
		<view class="cmd-box">
			<view class="flex">
				<xfl-select
					:list="datalist"
					:clearable="false"
					:showItemNum="5"
					:listShow="false"
					:isCanInput="false"
					:style_Container="'height: 50px; font-size: 16px;'"
					:placeholder="'placeholder'"
					:initValue="'HNW'"
					:selectHideType="'hideAll'"
					class="LiFilter"
					@change="change1"
				></xfl-select>
				<view class="cmd-img"><image src="../../static/image/icon/Clip.png" mode=""></image></view>
				<xfl-select
					:list="datalist2"
					:clearable="false"
					:showItemNum="5"
					:listShow="false"
					:isCanInput="false"
					:style_Container="'height: 50px; font-size: 16px;'"
					:placeholder="'placeholder'"
					:initValue="'HNW'"
					:selectHideType="'hideAll'"
					class="LiFilter"
					@input="change2"
				></xfl-select>
			</view>
			<view class="flex">
				<input type="text" value="" class="LiFilter" placeholder="请输入转出数量" />
				<view class="">
					<view class="cmd-img"></view>
				</view>
				<input type="text" value="" class="LiFilter" placeholder="请输入收到数量" />
			</view>
			<view class="flex cmd-text">
				<text class="cmd-text1">HNW可用余额2343</text>
				<text class="cmd-text2">USDT可用余额23243</text>
			</view>
			<view class="flex cmd-text">
				<text class="cmd-text1">HNW/USDT   14.23</text>
				<text class="cmd-text2">手续费0.2%</text>
			</view>
			<view class="cmd-btn">
				<button @tap="navigate">兑换</button>
			</view>
			<view class="cmd-sm">
				<view class="">
					说明:
				</view>
				<text>
					1.因智能交易兑币值波动，兑换结果可能与显示稍有不一致；
					2.若兑换失败，原路返回。
				</text>
			</view>
		</view>
	</view>
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import xflSelect from '../../components/xfl-select/xfl-select.vue';
export default {
	components: { uniNavBar, xflSelect },
	data() {
		return {
			datalist: [
				{
					value: 'HNW',
					tx:'1'
				},
				{
					value: 'USDT',
					tx:'2'
				}
			],
			datalist2: [
				{
					value: 'HNW'
				},
				{
					value: 'USDT'
				}
			]
		};
	},
	methods: {
		clickLeft() {
			uni.switchTab({
				url: '../index/index'
			});
		},
		clickRight() {
			uni.navigateTo({
			    url: 'exchangeHistory/exchangeHistory'
			});
		},
		change1(e) {
			console.log(e)
		},
		change2(e) {},
		navigate(){
			uni.navigateTo({
			    url: './exchange1'
			});
		}
		
	}
};
</script>

<style lang="scss">
.cmd-box {
	margin: 60rpx 66rpx 0 66rpx;
	font-size: 24rpx;
	.flex{
		margin-top: 40rpx;
	}
	.LiFilter {
		width: 232rpx;
		height: 58rpx!important;
		// padding: 0 50rpx;
		text-align: center!important;
		background-color: #FFFFFF;
		
		border: none;
	}
	input{
		font-size: 22rpx;
		color: #999999;
	}
	.cmd-img {
		width: 36rpx;
		height: 30rpx;
		line-height: 30rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.cmd-text{
		color: #666666;
		font-size: 22rpx;
	}
	.cmd-btn{
		button{
			color: #FFFFFF;
			background-color: #2B9F93;
			margin-top: 40rpx;
		}
	}
	.cmd-sm{
		margin-top: 60rpx;
		color: #999999;
	}
}
</style>
